<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/banner.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/index.css">

</head>

<body>
    <div class="search content">
        <h3 class="title-left">ベッドと美しい生活 美好宠物生活 </h3>
        <h1>pidan</h1>
        <input type="text" class="iconfont" placeholder="&#xe651;搜索商品名称">
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <ol>
            <li class="on"><a href="" ><img src="../images/banner1.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner2.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner3.jpg" alt=""></a></li>
        </ol>
        <!-- 两边箭头 -->
         <div class="arrow left">
        <span class="iconfont">&#xe7c3;</span>
         </div>
         <div class="arrow right">
            <span class="iconfont">&#xe7c5;</span>
         </div>
        <!-- 导航按钮 -->
        <ul>
            <li class="on"></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div class="nav-top content">
        <ul>
        <li ><a class="on" href="">首页</a></li>
        <li><a href="">产品中心</a></li>
        <li><a href="">品牌故事</a></li>
        <li><a href="">新闻中心</a></li>
        <li><a href="">specia特别合作</a></li>
        <li><a href="">联系方式</a></li></ul>

    </div>

    <div class="product content">
        <div class="title-one">
            <h3 class="title">产品中心</h3>
            <span>
                <img src="../images/mao.png" alt="">
                <h3 class="cat">猫猫用</h3>
                 <h3 class="dog">狗狗用</h3>

            </span>

        </div>
       
        <ul>
            <li><img src="../images/picture1.jpg" alt=""><div class="shadow"><h3>pidan雪屋全封闭猫砂盆</h3><button class="button">立即购买</button></div></li>
            <li><img src="../images/picture2.jpg" alt=""><div class="shadow"><h3>pidan雪屋全封闭猫砂盆</h3><button class="button">立即购买</button></div></li>
            <li><img src="../images/picture3.jpg" alt=""><div class="shadow"><h3>pidan雪屋全封闭猫砂盆</h3><button class="button">立即购买</button></div></li>
            <li><img src="../images/picture4.jpg" alt=""><div class="shadow"><h3>pidan雪屋全封闭猫砂盆</h3><button class="button">立即购买</button></div></li>
            <li><img src="../images/picture5.jpg" alt=""><div class="shadow"><h3>pidan雪屋全封闭猫砂盆</h3><button class="button">立即购买</button></div></li>
            <li><img src="../images/picture6.jpg" alt=""><div class="shadow"><h3>pidan雪屋全封闭猫砂盆</h3><button class="button">立即购买</button></div></li>
       </ul>
            <div class="button_end">
            <button class="button">more</button>
        </div>
    </div>

    <div class="figure">
        <img src="../images/content_two.jpg" alt="">
    </div>

    <div class="document content">
        <h3>品牌故事</h3>
        <p>pidan是一个成立于巴黎，<br>
            专注为宠物设计产品的品牌。<br>
            pidan秉持「充满善意、富有创造力、勇敢而稳定」 的宗旨，<br>
            立志成为「美好宠物生活」的创造者。</p>
    </div>


    <div class="NewsCenter content" >
        <div class="title">新闻中心</div>
        <div class="img1"><img src="../images/new.jpg" alt=""></div>
        <div>
            <ul>
                <li><img src="../images/new2.jpg" alt=""></li>
                <li><img src="../images/new3.jpg" alt=""></li>
            </ul>
        </div>

        <div class="button_end">
            <button class="button">more</button>
        </div>
       
    </div>

    <div class="special content">
        <div class="title">special特别合作</div>
        <ul>
            <li>
                <img src="../images/end1.jpg" alt="">
                <p>pidan x蛋黄哥联名<br>
                    猫咪睡垫四季通用地垫<br>
                    狗窝垫防滑垫子宠物用品</p>
            </li>
            <li>
                <p>pidan x蛋黄哥联名<br>
                    毛毡围栏抓板瓦楞纸<br>
                    猫抓板磨爪器猫窝猫玩具</p>
                <img src="../images/end2.jpg" alt="">
            </li>
            <li>
                <img src="../images/end3.jpg" alt="">
                <p>pidan x蛋黄哥联名<br>
                    猫抓板泡面碗瓦楞纸<br>
                    磨爪器耐磨猫窝猫玩具</p>
            </li>
            <li>
                <p>pidan x蛋黄哥联名<br>
                    三角抓板瓦楞纸猫抓板<br>
                    磨爪器猫窝猫玩具</p>
                <img src="../images/end4.jpg" alt="">
            </li>
        </ul>

        <div class="button_end">
            <button class="button">more</button>
        </div>
    </div>

   
</body>



</html>